/* --------------------------------------------------------
 * This function invoked by the populate function, sets the 
 * selected tag in the "query" inputbox.
 * Needed to be declared before the populate!
 * -------------------------------------------------------- */
function alert_facet(value_selected){
	document.getElementById('j_idt3:thequery').value += value_selected;
}

/* --------------------------------------------------------
 * This function provides to populate all the facets of the 
 * cube, i get the content map from the "textarea" hidden called
 * "raw_content", so i can split and publish all the single 
 * tags on the facets.
 * -------------------------------------------------------- */

function populate(){
	raw_content = document.getElementById('raw_content').value;
	var temp_raw_content = raw_content.split("{");				//get the raw_content tags all in a line like this formattation {<VALUES>}, for get only the values i use those Split functions and i put away the chars { and }
	raw_content = temp_raw_content[1];				
	temp_raw_content = raw_content.split("}");
	raw_content = temp_raw_content[0];
	
	var splitted = raw_content.split(","); 					//Put on the "splitted" array all the tags sort by "<tag_name>=<occurrence_value>"
	
	object_array = new Array();
	mydiv = new Array();									

	var pageDivs = document.getElementsByClassName("faccetta");		//Get all the facets divs and set ready for the populate method
	for(i = 0; i < pageDivs.length;i++)
	{
		var query = splitted[i].split("=");
		
		mydiv[i] = pageDivs[i];
		
		var textual_query = new String('"' + query[0] + '"');		//Create the HTML code for the div, containing the tag, the value and the button.
		var div = '<div><p>' + query[0] + '<br>' + query[1] + '<br><input type="button" value="Look!" id="' + query[0] + '"  onClick="alert_facet(this.id)"></div>';
		mydiv[i].innerHTML = div;
	}
}


/* --------------------------------------------------------
 * OnClick Event Listeners for the Webkit
 * -------------------------------------------------------- */
document.querySelector('#cubo').addEventListener("mousemove", mouseOver, false);
document.querySelector('#cubo').addEventListener("click", select_face, false);
document.querySelector('#cubo').addEventListener("click", select_face_1, false);

var zoom_value = 1.0;								//Default Zoom Value
	
var paused = false;								//Variable set for the pause function on the first click
var avoid_selection = false;							//Permit the click on the button variable and don't de-pause the cube.

/* --------------------------------------------------------
 * On a Click on the Box you get the Cube movements paused
 * -------------------------------------------------------- */
function set_paused(){	
	if(!paused) paused = true;	
	else paused = false;
}

/* --------------------------------------------------------
 * Deprecated but useful for the "second click un-depouse"
 * -------------------------------------------------------- */
function selected_facet(){
	avoid_selection = false;
	set_paused();
}

/* --------------------------------------------------------
 * Movement functions on the Cube, the Event onMouseOver
 * -------------------------------------------------------- */
function mouseOver(e){	
	if(!paused){
		var y = e.pageX * -0.9,						//Event monitor and speed moltiplicator for the rotation.
		x = e.pageY * -0.9;
		rotate(x,y);
	}
	else{
		var classes, facet, info_box, target = e.target.parentNode;
										//Used for get the "faccetta" informations, deprecated but useful if you want to kow on what "faccetta" you are. The ID names are in the HTML source page.
		if (target.className && target.className.indexOf('faccetta') !== -1) {
				classes = target.className.split(' ');
				facet = classes[0];
				info_box = document.querySelector('#informazioni span');
				info_box.innerHTML = 'Classe Faccetta Selezionata: ' + facet;
		}
	}
}

/* --------------------------------------------------------
 * Set the new coordinates for rotation in webkit CSS3
 * -------------------------------------------------------- */
function rotate(newX,newY){
	var x = parseInt(document.querySelector('#rotate_x').value,10) + (newX || 0),
	y = parseInt(document.querySelector('#rotate_y').value,10) + (newY || 0),
	
	cubo = document.getElementById('cubo');

	cubo.style.webkitTransform = "rotateX(" + x + "deg) rotateY(" + y + "deg)";
	cubo.style.MozTransform = "rotateX(" + x + "deg) rotateY(" + y + "deg)";
	cubo.style.transform = "rotateX(" + x + "deg) rotateY(" + y + "deg)";
}

/* --------------------------------------------------------
 * On one click, set paused and avoid_selection = true
 * -------------------------------------------------------- */
function select_face(){	
		if(!paused) {
			set_paused();
			avoid_selection = true;
		}
		else{
		}
}

/* --------------------------------------------------------
 * In this case is possibile to select the "faccetta", pause turned on.
 * -------------------------------------------------------- */
function select_face_1(){	
		if(avoid_selection == true) {
			avoid_selection = false;
		}
		else{			
			selected_facet();
		}
}

/* --------------------------------------------------------
 * Visual effects functions
 * -------------------------------------------------------- */
function zoom_in(){		
	cubo = document.getElementById('cubo');
	zoom_value = zoom_value + 0.25;
	cubo.style.zoom = zoom_value;
}

function zoom_out(){		
	cubo = document.getElementById('cubo');
	zoom_value = zoom_value - 0.25;
	cubo.style.zoom = zoom_value;
}

function strafe_left(){
	container = document.getElementById('cubo-container');
	container.style.left = "5%";							
}

							
function strafe_right(){
	container = document.getElementById('cubo-container');
	container.style.left = "55%";							
}

function strafe_center(){
	container = document.getElementById('cubo-container');
	container.style.left = "33%";							
}

